<template>
  <nut-navbar
    class="top-nav"
    @on-click-back="handleClickBack"
    @on-click-title="title"
    @on-click-more="handleClickMore"
    :leftShow="Boolean(show_left)"
    :rightShow="Boolean(show_right)"
  >{{$t(title)}}
    <a slot="back-icon" style="display: inline-block;">
      <img style="width: .48rem;" src="/static/icons/back.png" alt="">
    </a>
    <a slot="more-icon" style="display: inline-block;">{{$t(right_title)}}</a>
  </nut-navbar>
</template>

<script>
export default {
  name: 'TopNav',
    components: {

    },
    props:[
      "title",
        "show_left",
        "show_right",
        "right_title",
        "back_url",
    ],
    data() {
        return {
        };
    },
    methods: {
        more(){
            // alert('header头部， 点击更多')
        },
        handleClickBack(){
            if(this.back_url){
                location.href = this.back_url;
            } else{
                history.back(-1);
            }
        },
        handleClickMore(){
            this.$emit('clickMore');
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top-nav{
    line-height: 1.5rem;
    height: 1.5rem;
    text-align: center;
    top:0;
    position: fixed;
    width: 100%;
    color: #464646;
    z-index: 10;
    font-size: .373333rem;
    background: url(/static/img/profile-bg.png);
}
</style>
